<template>
  <div>
    <button @click="btn">点我切换隐藏与显示</button>
    <transition name="animate__animated animate__bounce" appear enter-active-class="animate__backInUp" leave-active-class="animate__backOutUp">
      <h1 v-show="isShow">{{msg}}</h1>
    </transition>
  </div>
</template>

<script>
import 'animate.css'
export default {
  data () {
    return {
      msg: '你好啊！！',
      isShow: true
    }
  },
  methods: {
    btn () {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style>
h1 {
  background-color: orange;
}
.hello-enter-active {
  animation: demo 1s linear;
}
.hello-leave-active {
  animation: demo 1s linear reverse;
}

@keyframes demo {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>